<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <link rel="stylesheet" type="text/css" href="http://www.jss.com.cn/Contents/portal/common/style/basis.css" />
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <script type="text/javascript" src="js/china.js"></script>
    <script type="text/javascript" src="js/shuiwu.js"></script>
<style type="text/css">
    #main{
        margin: 0 auto;
    }
    .width800{
        width:800px;
        margin: 0 auto;
        position: relative;
    }
    #link-info{
        width: 200px;
        background:#E0FFFF ;
        text-align: center;
        line-height: 1.5;
        font-size: 14px;
        position: absolute;
        bottom: 50px;
        left: 80px;
        display:none;
    }
</style>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 800px;height:600px;"></div>
    
    <div class="width800">
        <div id="link-info" >
            <a href="" id="u-guoshui"></a>
                <br />
            <a href="" id="u-dishui"></a>
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        option = {
            title: {
                text: '全国普通发票查询',
                subtext: '请点击地图上发票对应省份选择相关链接进行查询',
                left: 'center'
            },
            visualMap: {
                min: 1,
                max: 8,
                left: 'left',
                top: 'bottom',
                borderWidth:15,
                borderColor:'#fff',
                show:false,
                color:["#C7E8FA","#F0F0F0","#CCE7D5","#F9D3E3","#FCD68C","#D3E498","#EDEF98","#F5AF87"].reverse(),
            },
            series: [
                {
                    type: 'map',
                    mapType: 'china',
                    roam: false,
                    label: {
                        normal: {
                            show: true,
                            textStyle :{
                                color:"#000",
                                fontSize:12
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle:{
                        normal:{
                            borderColor:"#fff"
                        },
                        emphasis :{
                            areaColor: '#ccc'
                            
                        }
                    },
                    data:[
                        {name: '新疆',value: 1},
                        {name: '内蒙古',value: 1},
                        {name: '青海',value: 1},
                        {name: '甘肃',value: 1},
                        {name: '陕西',value: 1},
                        {name: '宁夏',value: 1},
                        {name: '西藏',value: 2},
                        {name: '黑龙江',value: 3},
                        {name: '吉林',value: 3},
                        {name: '辽宁',value: 3},
                        {name: '北京',value: 4},
                        {name: '河北',value: 4},
                        {name: '天津',value: 4},
                        {name: '山西',value: 4},
                        {name: '山东',value: 5},
                        {name: '江苏',value: 5},
                        {name: '安徽',value: 5},
                        {name: '浙江',value: 5},
                        {name: '上海',value: 5},
                        {name: '河南',value: 6},
                        {name: '湖南',value: 6},
                        {name: '湖北',value: 6},
                        {name: '江西',value: 6},
                        {name: '四川',value: 5},
                        {name: '重庆',value: 7},
                        {name: '贵州',value: 7},
                        {name: '广西',value: 7},
                        {name: '云南',value: 7},
                        {name: '广东',value: 8},
                        {name: '海南',value: 8},
                        {name: '福建',value: 8},
                        {name: '台湾',value: 8},
                        {name: '香港',value: 8},
                        {name: '澳门',value: 8}
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        
        myChart.on('click',  eConsolePieClick); // 点击事件绑定 与2.0不同

        function eConsolePieClick(e) {
            var provinceName = e.name;
            var linkinfo = document.getElementById('link-info');
            var guoshui = document.getElementById('u-guoshui');
            var dishui = document.getElementById('u-dishui');

            var ajax = $.ajax({
                type: 'POST',
                url: "js/shuiwu.js",
                data: data ,
                success: success ,
                dataType: dataType
            });

            linkinfo.style.display='block';
            guoshui.innerHTML = provinceName+"省份国税信息";
            guoshui.setAttribute("href","http://baidu.com");
            dishui.innerHTML = provinceName+"省份地税信息";
            dishui.setAttribute("href","http://baidu.com");

            console.log(provinceName); // 3.0 e有嵌套结构，不可以JSON.stringify

        }
        myChart.setOption(option);
    </script>
</body>
</html>